<template>
  <div>
    <h3>发表评论</h3>
    <hr>
    <input type="text" placeholder="请输入要内容，最多120字" v-model="msg">
    <button @click="postcomments">发表评论</button>
    <div class="comment">
      <div class="commentlist" v-for="(item,index) in commentlist" :key="item.id">
        <div class="comment-title">{{index+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time}}</div>
        <div class="comment-content">{{item.content}}</div>
      </div>
      <div class="more">
        <input type="button" value="加载更多" @click="getmore">
      </div>
    </div>
    
  </div>
</template>

<script>
//引入

export default {
  name: "Comment",

  data() {
    return {
      pageindex: 1,
      commentlist: [],
      msg: ""
    };
  },
  created() {
    this.getcomment();
  },
  methods: {
    getcomment() {
      this.$axios({
        method: "get",
        url:
          "http://www.liulongbin.top:3005/api/getcomments/" +
          this.id +
          "?pageindex=" +
          this.pageindex
      }).then(res => {
        // console.log(res.data)
        // console.log(res.data.message)
        this.commentlist = this.commentlist.concat(res.data.message);
      });
    },
    getmore() {
      this.pageindex++;
      this.getcomment();
    },
    postcomments() {
      if (this.msg.trim().length === 0) {
        alert("请输入评论");
      }
      this.$axios({
        method: "post",
        url: "http://www.liulongbin.top:3005/api/postcomment/" + this.id,
        data: {
          content: this.msg
        }
      }).then(res => {
        
        console.log(res);
        if (res.data.status === 0) {
          // this.getcomment()
          var cat = {
            user_name: "匿名用户",
            add_time: Date.now(),
            content: this.msg.trim()
          };
          this.commentlist.unshift(cat);
          this.msg = "";
        }
      });
    }
  },
  props: ["id"]
};
</script>
<style scoped>
.comment {
  padding: 0.1rem 0.1rem 0 0.1rem;
  font-size: 0.26rem;
}
.comment-title {
  background-color: darkcyan;
}
.comment-content {
  margin: 0.14rem 0;
  text-indent: 0.4rem;
}
</style>
